<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>login...</title>
</head>
<body>

<form action="/regist" method="post" >

    <h3 style="text-align: center">注册</h3>
    <div style="width: 500px">
        <span >用户名</span>
        <input name="userName" type="text" >
    </div></br>
    <div style="width: 500px">
        <span >密码</span>
        <input name="password" type="text" >
    </div></br>

    <div style="width: 500px">
        <span>验证码</span>
        <input type="text" name="code">
    </div>
    <div style="width: 500px;">
        <span>验证码</span>
        <img id="code" th:src="@{/image}">
        <a href="javascript:;" onclick="changeCode()">换一张</a>
    </div></br>

    <button type="submit" style="width: 100%;height:30px;font-size: medium">注册</button>
   <h4 th:text="${msg}"></h4>
</form>


</body>
</html>
<style>

    form {
        border-radius: 10px;
        background-clip: padding-box;
        margin: 180px auto;
        width: 300px;
        height: 320px;
        padding: 15px 35px 15px 35px;
        background: rgb(165, 222, 141);
        border: 1px solid #eaeaea;
        box-shadow: 0 0 25px #cac6c6;
    }
    input{
        border-radius: 5px;
        width: 235px;
        height: 30px;
        margin-right: 5px;
    }
    span{
        display: inline-block;
        width: 50px;
    }

</style>

<script>
    function changeCode(){
        document.getElementById('code').src = '[[@{/image}]]?' + (new Date()).getTime()
    }
</script>